<template>
  <div class="goods-stock">
    <div class="content">
      <div class="top">
        <div class="title-wrapper">
          <div class="title">商品库</div>
        </div>
      </div>
      <div class="tab-box">
        <div class="tab">
          <ul>
            <li
              v-for="(item, index) of tabList"
              :key="index"
              :class="{'active': index === isActive}"
              @click="tablick(index)"
            >{{ item }}</li>
          </ul>
        </div>
        <el-button type="primary" @click.native="add">添加商品</el-button>
      </div>
    </div>
    <div class="bottom">
      <el-table :data="list" style="width: 100%" :height="height">
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <div>{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" width="300">
          <template slot-scope="scope">
            <div class="d-flex-c">
              <el-avatar :size="60" shape="square" :src="scope.row.cover_img_url" class="border" />
              <div class="d-flex-colomn" style="margin-left: 20px">
                <span style="width: 150px">{{ scope.row.name }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.priceType === 1 ?'一口价:' + scope.row.price : scope.row.priceType === 2 ? '价格区间:' + (price + '——' + price2) : '原价:' + scope.row.price }}元</div>
            <p v-if="scope.row.priceType===3">现价: {{ scope.row.price2 }}元</p>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="商品链接" width="300" />
        <!-- <el-table-column prop="link" label="状态" /> -->
        <el-table-column label="操作" width="">
          <template slot-scope="scope">
            <span v-if="scope.row.status !== 2" class="blue mr-30" @click="sendCheck">{{ scope.row.status === 3 ? '提交审核' : scope.row.status === 0 ? '提交审核' : scope.row.status === 1 ? '撤回审核' : '' }}</span>
            <!-- <span class="blue mr-30" @click="amendPrice">修改价格</span> -->
            <span v-if="scope.row.status !== 1" class="blue mr-30">编辑</span>
            <span class="red">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 提交审核 -->
    <el-dialog
      title="提交审核"
      :visible.sync="checkDialogVisible"
      class="goodsDialog"
      top="8vh"
      :before-close="handleClose"
    >
      <div class="d-flex-c">
        <img src="@/assets/tan.png" alt>
      </div>
      <p class="d-flex-c">审核大约需要1-7天</p>
      <span slot="footer" class="dialog-footer d-flex-c">
        <el-button class="green" @click="checkDialogVisible = false">提交审核</el-button>
        <el-button type="primary" class="white" @click="checkDialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 修改价格 -->
    <!-- <el-dialog
      title="修改价格"
      :visible.sync="amendDialogVisible"
      class="goodsDialog"
      top="8vh"
      :before-close="handleClose"
    >
      <div style="margin-left: 80px">
        <div style="width: 300px" class="d-flex">
          <el-radio v-model="radio" label="1">一口价</el-radio>
          <span class="d-flex">
            <span style="white-space: nowrap" class="mr-10">价格</span>
            <el-input v-model="input2">
              <template slot="append">元</template>
            </el-input>
          </span>
        </div>
        <div style="width: 400px" class="d-flex mt-15">
          <el-radio v-model="radio" label="1">价格区间</el-radio>
          <span class="d-flex">
            <span style="white-space: nowrap" class="mr-10">价格</span>
            <el-input v-model="input2">
              <template slot="append">元</template>
            </el-input>
          </span>
          <span>—</span>
          <span>
            <el-input v-model="input2">
              <template slot="append">元</template>
            </el-input>
          </span>
        </div>
        <div style="width: 500px" class="d-flex mt-15">
          <el-radio v-model="radio" label="1">显示折扣价</el-radio>
          <span class="d-flex mr-10">
            <span style="white-space: nowrap" class="mr-10">市场价</span>
            <el-input v-model="input2" placeholder="">
              <template slot="append">元</template>
            </el-input>
          </span>
          <span class="d-flex">
            <span style="white-space: nowrap" class="mr-10">现价</span>
            <el-input v-model="input2" placeholder="">
              <template slot="append">元</template>
            </el-input>
          </span>
        </div>
      </div>
      <span slot="footer">
        <el-button class="green" @click="amendDialogVisible = false">取消</el-button>
        <el-button type="primary" class="white" @click="amendDialogVisible = false">确定</el-button>
      </span>
    </el-dialog>-->
    <!-- 添加商品 -->
    <el-dialog
      title="添加商品"
      :visible.sync="dialogVisible"
      class="goodsDialog"
      top="8vh"
      :before-close="handleClose"
    >
      <div class="dialog-content">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-form-item label="商品封面:" prop="coverImgUrl">
            <div class="tip" style="width: 400px; text-indent:0">最大尺寸：300像素 * 300像素,大小不超过1MB</div>
            <el-upload
              class="upload-demo"
              action="https://fengbao.zhixiu.vip/api/back/events/live?type=uploadfile"
              :on-preview="handleGoodsImgPreview"
              :on-remove="handleGoodsImgRemove"
              :before-upload="beforeGoodsImgUpload"
              :on-success="handleGoodsImgSuccess"
              :limit="1"
              name="files"
            >
              <el-button size="small" type="primary">上传图片</el-button>
            </el-upload>
            <el-dialog :visible.sync="goodsDialogVisible">
              <img width="100%" :src="goodsDialogGoodsImgUrl" alt>
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品名称：" style="width: 500px" prop="name">
            <template>
              <div>
                <el-input v-model="form.name" placeholder="3-14个字" />
              </div>
            </template>
          </el-form-item>
          <el-form-item label="价格形式：" prop="price">
            <template>
              <div>
                <div style="width: 300px" class="d-flex">
                  <el-radio v-model="form.priceType" :label="1">一口价</el-radio>
                  <span class="d-flex">
                    <span style="white-space: nowrap" class="mr-10">价格</span>
                    <el-input v-model="form.price" :disabled="onePriceDisable">
                      <template slot="append">元</template>
                    </el-input>
                  </span>
                </div>
                <div style="width: 400px" class="d-flex mt-15">
                  <el-radio v-model="form.priceType" :label="2">价格区间</el-radio>
                  <span class="d-flex">
                    <span style="white-space: nowrap" class="mr-10">价格</span>
                    <el-input v-model="form.price" :disabled="regionPriceDisable">
                      <template slot="append">元</template>
                    </el-input>
                  </span>
                  <span>—</span>
                  <span>
                    <el-input v-model="form.price2" :disabled="regionPriceDisable">
                      <template slot="append">元</template>
                    </el-input>
                  </span>
                </div>
                <div style="width: 500px" class="d-flex mt-15">
                  <el-radio v-model="form.priceType" :label="3">显示折扣价</el-radio>
                  <span class="d-flex mr-10">
                    <span style="white-space: nowrap" class="mr-10">市场价</span>
                    <el-input v-model="form.price" placeholder :disabled="discountPriceDisable">
                      <template slot="append">元</template>
                    </el-input>
                  </span>
                  <span class="d-flex">
                    <span style="white-space: nowrap" class="mr-10">现价</span>
                    <el-input v-model="form.price2" :disabled="discountPriceDisable" placeholder>
                      <template slot="append">元</template>
                    </el-input>
                  </span>
                </div>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="商品链接：" style="width: 500px" prop="url">
            <el-input v-model="form.url" placeholder="请填写链接" />
          </el-form-item>
        </el-form>
        <div style="width: 500px; margin-left: 150px; line-height: 20px ">
          请确保小程序页面路径可访问。
          <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/commodity-api.html" style="color: #409EFF">获取更多页面路径</a>例如：pages/index/index.wxml?query_id=test_value
        </div>
      </div>
      <span slot="footer" class="dialog-footer d-flex-c">
        <!-- <el-button class="green" @click="dialogVisible = false">保存</el-button> -->
        <el-button type="primary" class="green" @click="saveGoods">保存并提审</el-button>
      </span>
    </el-dialog>
    <Pagination
      class="pagination"
      :total="total"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
  </div>
</template>
<script>
import { getGoodsStockList, addLiveGoods, updateLiveGoods } from '@/api/live'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    Pagination
  },
  data() {
    return {
      onePriceDisable: false,
      regionPriceDisable: true,
      discountPriceDisable: true,
      rules: {
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 14, message: '长度在 3 到 14 个字符', trigger: 'blur' }],
        coverImgUrl: [
          { required: true, message: '请上传商品封面', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入商品链接', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ]
      },
      form: {
        coverImgUrl: '',
        name: '',
        priceType: 1,
        price: '',
        price2: '',
        url: ''
      },
      form2: {

      },
      goodsDialogVisible: false,
      goodsDialogGoodsImgUrl: '',
      goodsImgUrl: '',
      height: 0,
      status: 0,
      total: 0,
      currentPage: 1,
      amendDialogVisible: false,
      checkDialogVisible: false,
      input: '',
      fileList: [],
      dialogVisible: false,
      tabList: ['未审核', '审核中', '审核通过', '审核驳回'],
      isActive: 0,
      list: []
    }
  },
  watch: {
    'form.priceType': {
      handler(newVal) {
        switch (newVal) {
          case 1:
            this.onePriceDisable = false
            this.regionPriceDisable = true
            this.discountPriceDisable = true
            this.form.price2 = ''
            this.form.price = ''
            break
          case 2:
            this.onePriceDisable = true
            this.regionPriceDisable = false
            this.discountPriceDisable = true
            this.form.price2 = ''
            this.form.price = ''
            break
          case 3:
            this.onePriceDisable = true
            this.regionPriceDisable = true
            this.discountPriceDisable = false
            this.form.price2 = ''
            this.form.price = ''
            break
        }
      }
    }
  },
  created() {
    this._updateLiveGoods(this.status)
      .then(() => {
        this._getGoodsStockList({ status: this.status, page: this.currentPage })
      })
  },
  mounted() {
    this.$nextTick(() => {
      this.initHeight()
    })
  },
  methods: {
    beforeGoodsImgUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isLt1M
    },
    handleGoodsImgSuccess(res, file) {
      this.goodsImgUrl = URL.createObjectURL(file.raw)
      if (res.code === ERR_OK) {
        this.form.coverImgUrl = res.data.media_id
      }
    },
    handleGoodsImgRemove(file, fileList) {
      this.form.coverImgUrl = ''
      this.goodsImgUrl = ''
    },
    handleGoodsImgPreview(file) {
      this.goodsDialogGoodsImgUrl = this.goodsImgUrl
      this.goodsDialogVisible = true
    },
    saveGoods() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this._addLiveGoods(this.form)
            .then(() => {
              this.dialogVisible = false
              
            })
        } else {
          this.dialogVisible = true
          return false
        }
      })
    },
    clearForm() {
      this.form.coverImgUrl = ''
      this.form.name = ''
      this.form.priceType = 1

    },
    handleNextPage(page) {
      this.currentPage = page
      this._getGoodsStockList({ status: this.status, page: this.currentPage })
    },
    // amendPrice() {
    //   this.amendDialogVisible = true
    // },
    sendCheck() {
      this.checkDialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    add() {
      this.dialogVisible = true
    },
    tablick(index) {
      this.currentPage = 1
      this.isActive = index
      switch (index) {
        case 0:
          this.status = 0
          break
        case 1:
          this.status = 1
          break
        case 2:
          this.status = 2
          break
        case 3:
          this.status = 3
          break
      }
      this._updateLiveGoods(this.status)
        .then(() => {
          this._getGoodsStockList({ status: this.status, page: this.currentPage })
        })
    },
    initHeight() {
      this.height = document.body.clientHeight - 280
      window.onresize = () => {
        this.height = document.body.clientHeight - 280
      }
    },
    _addLiveGoods({ coverImgUrl, name, priceType, price, price2, url }) {
      return addLiveGoods({ coverImgUrl, name, priceType, price, price2, url })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message
            })
            return Promise.resolve()
          }
        })
    },
    _getGoodsStockList({ status, page }) {
      getGoodsStockList({ status, page })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.data
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _updateLiveGoods(status) {
      return updateLiveGoods(status)
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
.goodsDialog /deep/ .el-dialog {
  min-width: 800px;
}
.goods-stock {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  .tab-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .tab {
      ul {
        display: flex;
        align-items: center;
        li {
          list-style: none;
          color: rgba(153, 153, 153, 1);
          font-size: 18px;
          line-height: 25px;
          text-align: left;
          font-family: SourceHanSansSC-regular;
          margin-right: 50px;
          cursor: pointer;
          &.active {
            color: #409eff;
          }
        }
      }
    }
  }
}
.d-flex {
  display: flex;
  align-items: center;
}
.d-flex-c {
  display: flex;
  justify-content: center;
  align-items: center;
}
.green {
  background: #07c160;
  color: #fff;
}
.white {
  background: #fff;
  color: #444;
  border-color: #ccc;
}
.blue {
  color: #409eff;
  cursor: pointer;
}
.red {
  color: #f56c6c;
  cursor: pointer;
}
.mr-30 {
  margin-right: 30px;
}
.mr-10 {
  margin-right: 10px;
}
.mt-15 {
  margin-top: 15px;
}
.tip {
  color: rgba(153, 153, 153, 1);
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  text-indent: 25px;
}
</style>
